<template>
  <div>
    <a-radio-group v-model="cycle">
      <a-radio-button value="week">
        一周
      </a-radio-button>
      <a-radio-button value="month">
        一月
      </a-radio-button>
      <a-radio-button value="year">
        一年
      </a-radio-button>
    </a-radio-group>
    <a-range-picker
      :default-value="[moment('2016/01/01', dateFormat), moment('2016/01/31', dateFormat)]"
      :format="dateFormat"
      @change="getmyDate">
    </a-range-picker>
    <div ref="echartsContainer" style="height: 700px; width: 100%"></div>
  </div>
</template>
<script>
  import Echarts from '@/utils/echarts'
  import axios from 'axios'
  import moment from 'moment'
  function splitData (rawData) {
    const categoryData = []
    const values = []
    const volumes = []
    for (let i = 0; i < rawData.length; i++) {
      categoryData.push(rawData[i].splice(0, 1)[0])
      values.push(rawData[i])
      volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1])
    }
    return {
      categoryData: categoryData,
      values: values,
      volumes: volumes
    }
  }
  // function calculateMA (dayCount, data) {
  //   var result = []
  //   for (var i = 0, len = data.values.length; i < len; i++) {
  //     if (i < dayCount) {
  //       result.push('-')
  //       continue
  //     }
  //     var sum = 0
  //     for (var j = 0; j < dayCount; j++) {
  //       sum += data.values[i - j][1]
  //     }
  //     result.push(+(sum / dayCount).toFixed(3))
  //   }
  //   return result
  // }
  function getDateProportion (startD, endD) {
    const STD = new Date('2016/01/01').getTime()
    const ED = new Date('2016/01/31').getTime()
    startD = new Date(startD).getTime()
    endD = new Date(endD).getTime()
    const bigLength = ED - STD
    const STL = Math.ceil((startD - STD) * 100 / bigLength)
    const EDL = 100 - Math.floor((ED - endD) * 100 / bigLength)
    return {
      STL,
      EDL
    }
  }
  // console.log(getDateProportion('2016/01/16', '2016/01/20'))
  const mydata2 = [0.012, 0.021, 0.0393, '-', '-', 0.0135, 0.0178, 0.0286, '-', '-', 0.0900, 0.0345, 0.0393, '-', '-', 0.0135, 0.0178, 0.0286, '-']
  const mydata3 = ['-', '-', '-', -0.0108, -0.0154, '-', '-', '-', -0.0119, -0.0361, '-', '-', '-', -0.0108, -0.0154, '-', '-', '-', -0.0119]

  const mydata4 = [0.021, 0.024, 0.036, 0.045, 0.041, 0.067, 0.058, 0.047, 0.039, 0.029, 0.033, 0.044, 0.056, 0.069, 0.081, 0.076, 0.072, 0.077, 0.066]
  const mydata5 = [0.021, 0.024, 0.026, 0.045, 0.041, 0.017, 0.058, 0.047, 0.039, 0.029, 0.033, 0.044, 0.056, 0.039, 0.081, 0.076, 0.072, 0.077, 0.066]
  const mydata6 = [0.021, 0.024, 0.016, 0.045, 0.041, 0.027, 0.058, 0.047, 0.039, 0.029, 0.033, 0.044, 0.026, 0.069, 0.081, 0.076, 0.072, 0.077, 0.066]
  const mydata7 = [21, 24, 16, 45, 41, 27, 58, 47, 39, 29, 33, 44, 26, 69, 81, 76, 72, 77, 66]
  const mydata8 = [29, 33, 44, 26, 69, 81, 76, 72, 77, 66, 21, 24, 16, 45, 41, 27, 58, 47, 39]
  let myChart = null
  let dateXlin = null
  export default {
    name: 'Radar',
    props: {
      data: {
        type: Array,
        default: null
      }
    },
    data: () => {
       return {
        dateFormat: 'YYYY/MM/DD',
        cycle: ''
       }
    },
    watch: {
      cycle: function (newCycle) {
        console.log(newCycle);
        const LN = {
          STL: 0,
          EDL: 100
        }
        if (newCycle === 'week') {
          LN.STL = 0
          LN.EDL = 25
        } else if (newCycle === 'month') {
          LN.STL = 0
          LN.EDL = 100
        } else {
          LN.STL = 0
          LN.EDL = 100
        }
        // const LN = getDateProportion(dateString[0], dateString[1])
        // console.log(33333333, LN)
        this.$nextTick(() => {
          myChart.clear()
          myChart.setOption(
            {
              animation: false,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              // borderWidth: 1,
              // borderColor: '#ccc',
              padding: 10,
              // textStyle: {
              //   color: '#000'
              // },
              // position: function (pos, params, el, elRect, size) {
              //   const obj = {
              //     top: 10
              //   }
              //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
              //   return obj
              // },
              formatter: function (params) {
                // (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
                // console.log(params)
                try {
                  let str = ''
                if (params[0]['axisIndex'] === 1) {
                  const arr = params.splice(0, 2)
                  params.splice(3, 0, arr[0])
                  params.splice(4, 0, arr[1])
                } else if (params[0]['axisIndex'] === 2) {
                  const arr = params.splice(0, 2)
                  params.push(arr[0])
                  params.push(arr[1])
                }
                str = `<div><p>${params[0].axisValue}</p>
                    <p style="color: ${params[0].color}">${params[0].seriesName}: ${(params[0].value * 100).toFixed(1)}%</p>
                    <p style="color: ${params[1].color}">${params[1].seriesName}: ${(params[1].value * 100).toFixed(1)}%</p>
                    <p style="color: ${params[2].color}">${params[2].seriesName}: ${(params[2].value * 100).toFixed(1)}%</p>`
                  if (params[3]['value'] === '-') {
                    str += `<p style="color: ${params[4].color}">盈亏分析: ${(params[4]['value'] * 100).toFixed(1)}%</p></div>`
                  } else {
                    str += `<p style="color: ${params[3].color}">盈亏分析: ${(params[3]['value'] * 100).toFixed(1)}%</p></div>`
                  }
                  str += `<p style="color: ${params[5].color}">${params[5].seriesName}: ${params[5].value}</p></div>`
                  str += `<p style="color: ${params[6].color}">${params[6].seriesName}: ${params[6].value}</p></div>`
                return str
                } catch (error) {
                }
                // console.log(str)
              }
              // extraCssText: 'width: 170px'
            },
            axisPointer: {
              link: [
                {
                  xAxisIndex: 'all'
                }
              ],
              label: {
                backgroundColor: '#777'
              }
            },
            // toolbox: {
            //   feature: {
            //     dataZoom: {
            //       yAxisIndex: false
            //     },
            //     brush: {
            //       type: ['lineX', 'clear']
            //     }
            //   }
            // },
            // visualMap: {
            //   show: false,
            //   seriesIndex: 5,
            //   dimension: 2,
            //   pieces: [
            //     {
            //       value: 1000,
            //       color: downColor
            //     },
            //     {
            //       value: -1000,
            //       color: upColor
            //     }
            //   ]
            // },
            grid: [
              {
                left: '1%',
                right: '3%',
                top: '3%',
                height: '25%'
              },
              {
                left: '1%',
                right: '3%',
                top: '32%',
                height: '22%'
              },
              {
                left: '1%',
                right: '3%',
                top: '60%',
                height: '22%'
              }
            ],
            xAxis: [
              {
                type: 'category',
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                  z: 100
                }
              },
              {
                type: 'category',
                gridIndex: 1,
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 2,
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                  show: true,
                  fontSize: 10
                },
                min: 'dataMin',
                max: 'dataMax'
              }
            ],
            yAxis: [
              {
                scale: true,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  formatter: function (val) {
                    return (val * 100).toFixed(1) + '%'
                  },
                  fontSize: 8
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return ((params.value) * 100).toFixed(1) + '%'
                    }
                  }
                },
                nameTextStyle: {
                  fontSize: 8
                },
                position: 'right'
              },
              {
                scale: true,
                type: 'value',
                gridIndex: 1,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  formatter: function (val) {
                    return (val * 100).toFixed(1) + '%'
                  },
                  fontSize: 8
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return ((params.value) * 100).toFixed(1) + '%'
                    }
                  }
                },
                nameTextStyle: {
                  fontSize: 8
                },
                position: 'right'
                // splitNumber: 2,
                // axisLabel: { show: false },
                // axisLine: { show: false },
                // axisTick: { show: false },
                // splitLine: { show: false }
              },
              {
                scale: true,
                type: 'value',
                gridIndex: 2,
                splitArea: {
                  show: true
                },
                nameTextStyle: {
                  fontSize: 8
                },
                axisLabel: {
                  fontSize: 8
                },
                position: 'right'
                // axisPointer: {
                //   label: {
                //     formatter: function (params) {
                //       return ((params.value) * 100).toFixed(1) + '%'
                //     }
                //   }
                // }
                // splitNumber: 2,
                // axisLabel: { show: false },
                // axisLine: { show: false },
                // axisTick: { show: false },
                // splitLine: { show: false }
              }
            ],
            dataZoom: [
              {
                show: false,
                start: LN.STL,
                end: LN.EDL,
                zoomOnMouseWheel: false
              },
              {
                show: false,
                xAxisIndex: [0, 1],
                start: LN.STL,
                end: LN.EDL,
                zoomOnMouseWheel: false
              },
              {
                show: true,
                xAxisIndex: [0, 2],
                type: 'slider',
                top: '85%',
                start: LN.STL,
                end: LN.EDL,
                zoomOnMouseWheel: false
              }
            ],
            series: [
              {
                name: '基准收益',
                type: 'line',
                data: mydata4,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '策略收益',
                type: 'line',
                data: mydata5,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '超额收益',
                type: 'line',
                data: mydata6,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '盈分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                label: {
                  show: false,
                  position: 'top'
                },
                data: mydata2
              },
              {
                name: '亏分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata3
              },
              {
                name: '买入',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata7
              },
              {
                name: '卖出',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata8
              }
            ]
          }
        )
        })
      }
    },
    mounted () {
      myChart = Echarts.init(this.$refs.echartsContainer)
      axios.get('/data.json').then((rawData) => {
        // console.log(222222, rawData)
        dateXlin = splitData(rawData.data)
        console.log(11111111, dateXlin)
        myChart.setOption(
          {
            animation: false,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              // borderWidth: 1,
              // borderColor: '#ccc',
              padding: 10,
              // textStyle: {
              //   color: '#000'
              // },
              // position: function (pos, params, el, elRect, size) {
              //   const obj = {
              //     top: 10
              //   }
              //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
              //   return obj
              // },
              formatter: function (params) {
                // (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
                // console.log(params)
                try {
                  let str = ''
                if (params[0]['axisIndex'] === 1) {
                  const arr = params.splice(0, 2)
                  params.splice(3, 0, arr[0])
                  params.splice(4, 0, arr[1])
                } else if (params[0]['axisIndex'] === 2) {
                  const arr = params.splice(0, 2)
                  params.push(arr[0])
                  params.push(arr[1])
                }
                str = `<div><p>${params[0].axisValue}</p>
                    <p style="color: ${params[0].color}">${params[0].seriesName}: ${(params[0].value * 100).toFixed(1)}%</p>
                    <p style="color: ${params[1].color}">${params[1].seriesName}: ${(params[1].value * 100).toFixed(1)}%</p>
                    <p style="color: ${params[2].color}">${params[2].seriesName}: ${(params[2].value * 100).toFixed(1)}%</p>`
                  if (params[3]['value'] === '-') {
                    str += `<p style="color: ${params[4].color}">盈亏分析: ${(params[4]['value'] * 100).toFixed(1)}%</p></div>`
                  } else {
                    str += `<p style="color: ${params[3].color}">盈亏分析: ${(params[3]['value'] * 100).toFixed(1)}%</p></div>`
                  }
                  str += `<p style="color: ${params[5].color}">${params[5].seriesName}: ${params[5].value}</p></div>`
                  str += `<p style="color: ${params[6].color}">${params[6].seriesName}: ${params[6].value}</p></div>`
                return str
                } catch (error) {
                }
                // console.log(str)
              }
              // extraCssText: 'width: 170px'
            },
            axisPointer: {
              link: [
                {
                  xAxisIndex: 'all'
                }
              ],
              label: {
                backgroundColor: '#777'
              }
            },
            // toolbox: {
            //   feature: {
            //     dataZoom: {
            //       yAxisIndex: false
            //     },
            //     brush: {
            //       type: ['lineX', 'clear']
            //     }
            //   }
            // },
            // visualMap: {
            //   show: false,
            //   seriesIndex: 5,
            //   dimension: 2,
            //   pieces: [
            //     {
            //       value: 1000,
            //       color: downColor
            //     },
            //     {
            //       value: -1000,
            //       color: upColor
            //     }
            //   ]
            // },
            grid: [
              {
                left: '1%',
                right: '3%',
                top: '3%',
                height: '25%'
              },
              {
                left: '1%',
                right: '3%',
                top: '32%',
                height: '22%'
              },
              {
                left: '1%',
                right: '3%',
                top: '60%',
                height: '22%'
              }
            ],
            xAxis: [
              {
                type: 'category',
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                  z: 100
                }
              },
              {
                type: 'category',
                gridIndex: 1,
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 2,
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                  show: true,
                  fontSize: 10
                },
                min: 'dataMin',
                max: 'dataMax'
              }
            ],
            yAxis: [
              {
                scale: true,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  formatter: function (val) {
                    return (val * 100).toFixed(1) + '%'
                  },
                  fontSize: 8
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return ((params.value) * 100).toFixed(1) + '%'
                    }
                  }
                },
                nameTextStyle: {
                  fontSize: 8
                },
                position: 'right'
              },
              {
                scale: true,
                type: 'value',
                gridIndex: 1,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  formatter: function (val) {
                    return (val * 100).toFixed(1) + '%'
                  },
                  fontSize: 8
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return ((params.value) * 100).toFixed(1) + '%'
                    }
                  }
                },
                nameTextStyle: {
                  fontSize: 8
                },
                position: 'right'
                // splitNumber: 2,
                // axisLabel: { show: false },
                // axisLine: { show: false },
                // axisTick: { show: false },
                // splitLine: { show: false }
              },
              {
                scale: true,
                type: 'value',
                gridIndex: 2,
                splitArea: {
                  show: true
                },
                nameTextStyle: {
                  fontSize: 8
                },
                axisLabel: {
                  fontSize: 8
                },
                position: 'right'
                // axisPointer: {
                //   label: {
                //     formatter: function (params) {
                //       return ((params.value) * 100).toFixed(1) + '%'
                //     }
                //   }
                // }
                // splitNumber: 2,
                // axisLabel: { show: false },
                // axisLine: { show: false },
                // axisTick: { show: false },
                // splitLine: { show: false }
              }
            ],
            dataZoom: [
              {
                show: false,
                zoomOnMouseWheel: false
              },
              {
                show: false,
                zoomOnMouseWheel: false
              },
              {
                show: true,
                xAxisIndex: [0, 2],
                type: 'slider',
                top: '85%',
                start: 0,
                end: 100,
                zoomOnMouseWheel: false
              }
            ],
            series: [
              {
                name: '基准收益',
                type: 'line',
                data: mydata4,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '策略收益',
                type: 'line',
                data: mydata5,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '超额收益',
                type: 'line',
                data: mydata6,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '盈分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                label: {
                  show: false,
                  position: 'top'
                },
                data: mydata2
              },
              {
                name: '亏分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata3
              },
              {
                name: '买入',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata7
              },
              {
                name: '卖出',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata8
              }
            ]
          }
        )
        this.uploadData(myChart)
      })
    },
    methods: {
      moment,
      getCurrentStyle (current, today) {
        const style = {}
        if (current.date() === 1) {
          style.border = '1px solid #1890ff'
          style.borderRadius = '50%'
        }
        return style
      },
      uploadData (myChart) {
        const newdata2 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        const newdata3 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        const newdata4 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        const newdata5 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        const newdata6 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        const newdata7 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        const newdata8 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        let i = 0
        const myinterval = setInterval(() => {
          if (newdata2[i] !== '-') {
            clearInterval(myinterval)
            return false
          } else {
            newdata2[i] = mydata2[i]
            newdata3[i] = mydata3[i]
            newdata4[i] = mydata4[i]
            newdata5[i] = mydata5[i]
            newdata6[i] = mydata6[i]
            newdata7[i] = mydata7[i]
            newdata8[i] = mydata8[i]
            i++
          }
          this.$nextTick(() => {
            myChart.setOption({
              animation: true,
              // animationEasing: 'elasticIn',
              // animationEasingUpdate: 'elasticIn',
              // animationDurationUpdate: 1000,
              // stateAnimation: {
              //   duration: 2000
              // },
              series: [
              {
                name: '基准收益',
                type: 'line',
                data: newdata4,
                smooth: false,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '策略收益',
                type: 'line',
                data: newdata5,
                smooth: false,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '超额收益',
                type: 'line',
                data: newdata6,
                smooth: false,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '盈分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                label: {
                  show: false,
                  position: 'top'
                },
                data: newdata2
              },
              {
                name: '亏分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: newdata3
              },
              {
                name: '买入',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: newdata7
              },
              {
                name: '卖出',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: newdata8
              }
              ]
            })
          })
        }, 2000)
      },
      getmyDate (mydate, dateString) {
        // console.log(mydate, dateString)
        // console.log(mydate[0].getTime())
        const LN = getDateProportion(dateString[0], dateString[1])
        console.log(33333333, LN)
        this.$nextTick(() => {
          myChart.clear()
          myChart.setOption(
            {
              animation: false,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              // borderWidth: 1,
              // borderColor: '#ccc',
              padding: 10,
              // textStyle: {
              //   color: '#000'
              // },
              // position: function (pos, params, el, elRect, size) {
              //   const obj = {
              //     top: 10
              //   }
              //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
              //   return obj
              // },
              formatter: function (params) {
                // (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
                // console.log(params)
                try {
                  let str = ''
                if (params[0]['axisIndex'] === 1) {
                  const arr = params.splice(0, 2)
                  params.splice(3, 0, arr[0])
                  params.splice(4, 0, arr[1])
                } else if (params[0]['axisIndex'] === 2) {
                  const arr = params.splice(0, 2)
                  params.push(arr[0])
                  params.push(arr[1])
                }
                str = `<div><p>${params[0].axisValue}</p>
                    <p style="color: ${params[0].color}">${params[0].seriesName}: ${(params[0].value * 100).toFixed(1)}%</p>
                    <p style="color: ${params[1].color}">${params[1].seriesName}: ${(params[1].value * 100).toFixed(1)}%</p>
                    <p style="color: ${params[2].color}">${params[2].seriesName}: ${(params[2].value * 100).toFixed(1)}%</p>`
                  if (params[3]['value'] === '-') {
                    str += `<p style="color: ${params[4].color}">盈亏分析: ${(params[4]['value'] * 100).toFixed(1)}%</p></div>`
                  } else {
                    str += `<p style="color: ${params[3].color}">盈亏分析: ${(params[3]['value'] * 100).toFixed(1)}%</p></div>`
                  }
                  str += `<p style="color: ${params[5].color}">${params[5].seriesName}: ${params[5].value}</p></div>`
                  str += `<p style="color: ${params[6].color}">${params[6].seriesName}: ${params[6].value}</p></div>`
                return str
                } catch (error) {
                }
                // console.log(str)
              }
              // extraCssText: 'width: 170px'
            },
            axisPointer: {
              link: [
                {
                  xAxisIndex: 'all'
                }
              ],
              label: {
                backgroundColor: '#777'
              }
            },
            // toolbox: {
            //   feature: {
            //     dataZoom: {
            //       yAxisIndex: false
            //     },
            //     brush: {
            //       type: ['lineX', 'clear']
            //     }
            //   }
            // },
            // visualMap: {
            //   show: false,
            //   seriesIndex: 5,
            //   dimension: 2,
            //   pieces: [
            //     {
            //       value: 1000,
            //       color: downColor
            //     },
            //     {
            //       value: -1000,
            //       color: upColor
            //     }
            //   ]
            // },
            grid: [
              {
                left: '1%',
                right: '3%',
                top: '3%',
                height: '25%'
              },
              {
                left: '1%',
                right: '3%',
                top: '32%',
                height: '22%'
              },
              {
                left: '1%',
                right: '3%',
                top: '60%',
                height: '22%'
              }
            ],
            xAxis: [
              {
                type: 'category',
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                  z: 100
                }
              },
              {
                type: 'category',
                gridIndex: 1,
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                min: 'dataMin',
                max: 'dataMax'
              },
              {
                type: 'category',
                gridIndex: 2,
                data: dateXlin.categoryData,
                boundaryGap: ['20%', '20%'],
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                  show: true,
                  fontSize: 10
                },
                min: 'dataMin',
                max: 'dataMax'
              }
            ],
            yAxis: [
              {
                scale: true,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  formatter: function (val) {
                    return (val * 100).toFixed(1) + '%'
                  },
                  fontSize: 8
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return ((params.value) * 100).toFixed(1) + '%'
                    }
                  }
                },
                nameTextStyle: {
                  fontSize: 8
                },
                position: 'right'
              },
              {
                scale: true,
                type: 'value',
                gridIndex: 1,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  formatter: function (val) {
                    return (val * 100).toFixed(1) + '%'
                  },
                  fontSize: 8
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return ((params.value) * 100).toFixed(1) + '%'
                    }
                  }
                },
                nameTextStyle: {
                  fontSize: 8
                },
                position: 'right'
                // splitNumber: 2,
                // axisLabel: { show: false },
                // axisLine: { show: false },
                // axisTick: { show: false },
                // splitLine: { show: false }
              },
              {
                scale: true,
                type: 'value',
                gridIndex: 2,
                splitArea: {
                  show: true
                },
                nameTextStyle: {
                  fontSize: 8
                },
                axisLabel: {
                  fontSize: 8
                },
                position: 'right'
                // axisPointer: {
                //   label: {
                //     formatter: function (params) {
                //       return ((params.value) * 100).toFixed(1) + '%'
                //     }
                //   }
                // }
                // splitNumber: 2,
                // axisLabel: { show: false },
                // axisLine: { show: false },
                // axisTick: { show: false },
                // splitLine: { show: false }
              }
            ],
            dataZoom: [
              {
                show: false,
                start: LN.STL,
                end: LN.EDL,
                zoomOnMouseWheel: false
              },
              {
                show: false,
                start: LN.STL,
                end: LN.EDL,
                zoomOnMouseWheel: false
              },
              {
                show: true,
                xAxisIndex: [0, 2],
                type: 'slider',
                top: '85%',
                start: LN.STL,
                end: LN.EDL,
                zoomOnMouseWheel: false
              }
            ],
            series: [
              {
                name: '基准收益',
                type: 'line',
                data: mydata4,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '策略收益',
                type: 'line',
                data: mydata5,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '超额收益',
                type: 'line',
                data: mydata6,
                smooth: true,
                lineStyle: {
                  opacity: 0.5
                }
              },
              {
                name: '盈分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                label: {
                  show: false,
                  position: 'top'
                },
                data: mydata2
              },
              {
                name: '亏分析',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata3
              },
              {
                name: '买入',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata7
              },
              {
                name: '卖出',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                // barGap: '-100%',
                label: {
                  show: false,
                  position: 'bottom'
                },
                data: mydata8
              }
            ]
          }
        )
        })
      }
    }
  }
  </script>
<style scoped></style>
